<template>
  <div id="one">
    
    <div id="line" v-for="t in title" @click="details(t._id)">
      <div>
        <img class="yangshi" :src="'http://127.0.0.1:3000'+t.sellid.avatar" alt="">
        <span>{{t.title}}</span>
      </div>
      <div><span id="reply">{{t.reply.length}}</span></div>
    </div>
    
  </div>
</template>

<script>
  import {mapState} from "vuex";
  export default {
    mounted: function () {
      this.$store.dispatch("requesttitle");

    },
    computed:{
      ...mapState([
        "title",
      ])
    },
    methods:{
      details(e){
        // console.log(123,e)
        this.$store.dispatch("details",e);
        
      }
    }
  }

</script>

<style scoped>
  #one{
    padding-left: 10px;
    padding-top: 20px;
    padding-right: 5px;
  }
  #line {
    border-bottom: 1px solid #eee;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
  }
  .yangshi{
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  #reply{
    background-color: #cccccc;
    color: white;
    border-radius: 10px;
    display: block;
    width: 35px;
    height: 18px;
    text-align: center;
    line-height: 18px;
  }
  span {
    display: inline-block;
    font-size: 16px;
    color: #0099FF;
    padding: 0 10px ;
  }
  #reply{
    background-color: #cccccc;
    color: white;
    border-radius: 10px;
    display: block;
    width: 35px;
    height: 18px;
    text-align: center;
    line-height: 18px;
  }
</style>